<template>
  <div class="menu-item">
    <div class="menu-inner">{{ text }}</div>
  </div>
</template>

<script lang="ts" setup>
import {defineProps, toRefs} from 'vue'
import {useRoute} from "vue-router";
const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
})
const route = useRoute()
const {text} = toRefs(props)
</script>

<style scoped lang="scss">
.menu-item {
  font-style: italic;
  width: 183px;
  font-size: 26px;
  height: 70px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all;
  justify-content: flex-end;
  cursor: pointer;
  letter-spacing: 0.18em;
  padding-bottom: 25px;
  padding-left: 5px;
  background-image: url("./imgs/menu_bg.svg");
 /* background-size: 100% 100%;*/
  background-repeat: no-repeat;
  background-position:  center bottom;
}
.active {
  background-image: url("./imgs/menu_bg_active.svg");
}
</style>
